<template>
	<view>
		<view class="spec-modal-mask" v-if="show" @click="closeSpecModal"></view>
		<view class="spec-modal" v-if="show">
			<view class="spec-header">
				<image :src="goods.thumb" mode="aspectFill"></image>
				<view class="goods-info">
					<text class="goods-name">{{goods.goods_name}}</text>
					<text class="goods-description">{{goods.description}}</text>
					<text
						class="goods-price">{{selectedSpec ? selectedSpec.attr_price : goods.sell_price}}元/{{selectedSpec ? selectedSpec.attr_company : goods.company}}</text>
				</view>
				<view class="close-btn" @click="closeSpecModal">×</view>
			</view>

			<view class="spec-body">
				<view class="spec-item" v-if="goods.goods_attr_list && goods.goods_attr_list.length > 0">
					<text class="spec-title">选择规格</text>
					<view class="spec-options">
						<view class="spec-option" v-for="attr in goods.goods_attr_list" :key="attr.id"
							@click="selectSpec(attr)"
							:class="{ 'selected': selectedSpec && selectedSpec.id === attr.id }">{{attr.attrs}}</view>
					</view>
				</view>

				<view class="num-control">
					<text class="num-title">数量</text>
					<view class="num-btn-group">
						<view class="num-btn minus" @click="decreaseNum" :class="{ 'disabled': buyNum <= 1 }"></view>
						<text class="num">{{buyNum}}</text>
						<view class="num-btn plus" @click="increaseNum"></view>
					</view>
				</view>
			</view>

			<view class="spec-footer">
				<view class="total-price">
					<text>合计：</text>
					<text class="price">&yen;{{totalPrice}}</text>
				</view>
				<view>
					<button class="confirm-btn" :disabled="!selectedSpec" @click="confirmAddToCart">确认加入购物车</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			goods: {
				type: Object,
				required: true
			},
			show: {
				type: Boolean,
				required: true,
				default: false
			}
		},
		data() {
			return {
				selectedSpec: null,
				buyNum: 1
			}
		},
		computed: {
			// 计算总价
			totalPrice() {
				if (!this.goods || !this.selectedSpec) return 0;
				return (this.selectedSpec.attr_price * this.buyNum).toFixed(2);
			}
		},
		watch: {
			show(newVal) {
				if (newVal) {
					this.selectedSpec = null;
					this.buyNum = 1;
				}
			}
		},
		methods: {
			// 关闭弹窗
			closeSpecModal() {
				this.$emit('update:show', false);
			},
			// 选择规格
			selectSpec(attr) {
				this.selectedSpec = attr;
			},
			// 增加数量
			increaseNum() {
				this.buyNum++;
			},
			// 减少数量
			decreaseNum() {
				if (this.buyNum > 1) {
					this.buyNum--;
				}
			},
			// 确认加入购物车
			confirmAddToCart() {
				if (!this.selectedSpec) {
					uni.showToast({
						title: '请选择规格',
						icon: 'none'
					});
					return;
				}
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					setTimeout(function() {
						uni.redirectTo({
							url: '/pages/register/login'
						})
					}, 1500)

					return;
				}
				this.$emit('confirm', {
					goods: this.goods,
					spec: this.selectedSpec,
					num: this.buyNum
				});
				this.closeSpecModal();
			}
		}
	}
</script>

<style lang="scss">
	.spec-modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.spec-modal {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx;
		z-index: 1000;
		max-height: 80vh;
		overflow-y: auto;
	}

	.spec-header {
		display: flex;
		margin-bottom: 20rpx;
		position: relative;
	}

	.spec-header image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.goods-info {
		flex: 1;
	}

	.goods-name {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.goods-description {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 12rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.goods-price {
		font-size: 36rpx;
		color: #e64340;
		font-weight: bold;
	}

	.close-btn {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-size: 40rpx;
		color: #999;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.spec-body {
		margin-bottom: 20rpx;
	}

	.spec-item {
		margin-bottom: 30rpx;
	}

	.spec-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
		display: block;
	}

	.spec-options {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
	}

	.spec-option {
		padding: 15rpx 30rpx;
		background: #f5f5f5;
		border-radius: 40rpx;
		font-size: 26rpx;
		color: #333;
	}

	.spec-option.selected {
		background: #e64340;
		color: #fff;
	}

	.num-control {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}

	.num-title {
		font-size: 28rpx;
		color: #333;
		margin-right: 30rpx;
	}

	.num-btn-group {
		display: flex;
		align-items: center;
	}

	.num-btn {
		width: 70rpx;
		height: 70rpx;
		background: #f5f5f5;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.num-btn.minus::after {
		content: '-';
		font-size: 40rpx;
		color: #333;
	}

	.num-btn.plus::after {
		content: '+';
		font-size: 36rpx;
		color: #333;
	}

	.num-btn.disabled {
		opacity: 0.5;
	}

	.num {
		font-size: 32rpx;
		color: #333;
		margin: 0 30rpx;
	}

	.spec-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-top: 1rpx solid #f0f0f0;
	}

	.total-price {
		font-size: 28rpx;
		color: #333;
	}

	.price {
		font-size: 36rpx;
		color: #e64340;
		font-weight: bold;
		margin-left: 10rpx;
	}

	.confirm-btn {
		background: #e64340;
		color: #fff;
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
	}
</style>